<template>
  <div class="big" >
    <!-- 头部 -->
    <Header></Header>
    <!-- 走马灯 -->
    <div class="block">
      <el-carousel  height="900px" >
        <el-carousel-item v-for="item in carousels" :key="item" >
      <img :src="item" alt="" style="width: 100%; height:100% ">
    </el-carousel-item>
      </el-carousel>

      <!-- 搜索框 -->
      <div class="search">
        <el-input size="large" v-model="searchVal" placeholder="请输入想要搜索的地区">
            <i slot="suffix" @click="searchFn" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
    </div>
    <!-- 尾部 -->
    <Footer class="myFooter"></Footer>
  </div>
</template>

<script>
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"

export default {
  components: { Header,Footer },
data () {
  return {
  carousels: [
        require('@/assets/image/20.jpeg'),
        require('@/assets/image/15.jpeg'),
        require('@/assets/image/33.jpg'),
        require('@/assets/image/荷花.jpg')
      ],
      searchVal:'',
      searcList:[]
  }
},
methods:{
  // 搜索
 async searchFn(){
this.$router.push({path:'/properties',query:{title_contains:this.searchVal}})
  }
}
}
</script>

<style lang="less" scoped>
  big{
    padding-bottom: 22%;
  }
  .block{
    width: 100%;
    // position: relative;
    .search{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9;
      width: 300px;
    }
  }
  
  .myFooter{
    z-index: 9;
  }
</style>